import { View, Text, StyleSheet, Pressable, useAnimatedValue, Animated } from 'react-native'
import UIConstants from '../constants/UIConstants'
import Color from 'color' //第三方提供的颜色转换模块

export default function ZhButton({ onPress, title, bgColor = UIConstants.COLOR_GREEN }) {
    let num = useAnimatedValue(0)  //动画控制变量
    let bgc = num.interpolate({
        inputRange: [0, 1],
        outputRange: [bgColor, Color(bgColor).darken(0.3).hex()]

    })
    return (
        <Pressable onPress={onPress}
            onPressIn={() => {
                Animated.timing(num, {
                    toValue: 1,
                    useNativeDriver: true,
                }).start()
            }}
            onPressOut={() => {
                Animated.timing(num, {
                    toValue: 0,
                    useNativeDriver: true,
                }).start()
            }}>
            <Animated.View style={[ss.btn, { backgroundColor: bgc }]}>
                <Text style={ss.txt}>{title}</Text>
            </Animated.View>
        </Pressable>
    )
}

let ss = StyleSheet.create({
    btn: {
        backgroundColor: UIConstants.COLOR_GREEN,
        borderRadius: UIConstants.BORDER_RADIUS_MD,
        paddingVertical: UIConstants.SPACE_COL_MD
    },
    txt: {
        color: UIConstants.COLOR_WHITE,
        textAlign: 'center',
        fontSize: 16,
    }

})